<template>
	<view class="ayi-page">
		<view class="bg-c"><image class="bg-img" mode="aspectFill" src="../../../static/img/bg.png"></image></view>
		<view class="login-form">
			<view class="login-back" @click="onBack()"><i class="iconfont">&#xe63d;</i></view>
			<view class="login-icon"><image style="width: 80px; height: 140px;" mode="aspectFit" src="../../../static/img/login_icon.png"></image></view>
			<view class="login-f-control">
				<i class="iconfont">&#xe671;</i>
				<input class="l-input" v-model="fullName" placeholder="用户名" />
			</view>

			<view class="login-f-control">
				<i class="iconfont">&#xe683;</i>
				<input class="l-input" v-model="mobile" type="text" placeholder="手机号" />
			</view>
			<view class="login-f-control">
				<i class="iconfont">&#xe6ad;</i>
				<input class="l-input" v-model="password" type="password" placeholder="密码" />
			</view>
			<view class="login-f-control">
				<i class="iconfont">&#xe6ad;</i>
				<input class="l-input" v-model="repassword" type="password" placeholder="确认密码" />
			</view>
			<view class="login-f-control">
				<i class="iconfont">&#xe71a;</i>
				<input class="l-input" :disabled="isReadOnly" v-model="inviteCodeVal" type="text" placeholder="邀请码" />
			</view>
			<view class="login-f-control">
				<i class="iconfont">&#xe6ad;</i>
				<input class="l-input code-input" v-model="imgcode" type="text" placeholder="验证码" />
				<view class="code-span" @click="refreshCode()"><image class="bg-img" mode="aspectFit" :src="codeImg"></image></view>
			</view>
			<view class="login-btn-control"><button type="primary" @click="registClick()" class="l-btn-c">确定</button></view>
			<view class="login-btn-control"><button type="primary" @click="loginPage()" class="l-btn-c-ts">已有账号</button></view>
		</view>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
export default {
	data() {
		return {
			codeImg: '', //验证码图片的链接
			fullName: '', //用户名
			mobile: '', //手机号
			password: '', //密码
			repassword: '', //重新输入密码
			inviteCodeVal: '', //邀请码
			imgcode: '' ,//验证码,
			isReadOnly:false,//input是否是禁止输入
		};
	},
	onLoad() {
		if (Config.isAgent != 1) {
			this.navigateToSigleUrl('/pages/my/regist/regist');
			return;
		}
		this.refreshCode();
		let tempInviteCodeVal=VueTools.getStorageSync(Config.INCODE);
		if(!Tools.isEmpty(tempInviteCodeVal)){
			this.inviteCodeVal=tempInviteCodeVal;
			this.isReadOnly=true;
		}else{
			this.inviteCodeVal="";
			this.isReadOnly=false;
		}
	},
	computed: {},
	methods: {
		refreshCode() {
			let that = this;
			uni.request({
				url: Net.requestUrl(URL.LOGIN_VCODENEW), //仅为示例，并非真实接口地址。
				data: {
					t: Math.random(),
					sessid: Tools.getBodyAttribute('sessid')
				},
				header: {
					'Content-Type': 'image/png'
				},
				success: res => {
					console.log("获取验证的数据:",res);
					that.codeImg = res.data.data.img;
				}
			});
		},
		onBack() {
			this.goBackPage();
		},
		/**
		 * 点击注册
		 */
		registClick() {
			let that = this;
			if (Tools.isEmpty(this.fullName)) {
				VueTools.toastNo('请输入用户名');
				return;
			}
			if (Tools.isEmpty(this.mobile)) {
				VueTools.toastNo('请输入手机号');
				return;
			}
			if (Tools.isEmpty(this.password)) {
				VueTools.toastNo('请输入密码');
				return;
			}
			if (this.password !== this.repassword) {
				VueTools.toastNo('两次输入的密码不一致');
				return;
			}
			if (Tools.isEmpty(this.imgcode)) {
				VueTools.toastNo('请输入验证码');
				return;
			}
			if (Tools.isEmpty(this.inviteCodeVal)) {
				this.inviteCodeVal = '';
			}
			let obj =
				'{"username":"' +
				this.fullName +
				'","password":"' +
				this.password +
				'","imgcode":"' +
				this.imgcode +
				'","mobile":"' +
				this.mobile +
				'","agent":"' +
				Config.isAgent +
				'","inviteCode":"' +
				this.inviteCodeVal +
				'"}';
			Net.ayiHttp(
				URL.LOGIN_REGISTER,
				obj,
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						VueTools.toastNo(res.message);
						that.navigateToSigleUrl('/pages/my/login/login');
					} else {
						VueTools.toastNo(res.message);
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		/**
		 * 跳转到登录页面
		 */
		loginPage() {
			this.navigateToSigleUrl('/pages/my/login/login');
		}
	},
	onUnload() {}
};
</script>

<style lang="scss">
.bg-c {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: -1;
	.bg-img {
		width: 100%;
		height: 100%;
	}
}
.login-form {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	.login-back {
		text-align: left;
		color: #fff;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 20rpx;
	}
	.login-icon {
		margin-bottom: 20px;
	}
	.login-f-control {
		margin-bottom: 10px;
		height: 40px;
		display: flex;
		align-items: center;
		position: relative;
		i.iconfont {
			font-size: 24px;
			color: #fff;
			margin-right: 10px;
		}
		.l-input {
			height: 40px;
			width: 600rpx;
			color: #ffffff;
			border-bottom: 1px solid #ffffff;
			display: inline-block;
			&.code-input {
				width: 430rpx;
				padding-right: 170rpx;
			}
		}
		.uni-input-input {
			background: red;
		}
		.code-span {
			position: absolute;
			bottom: 20rpx;
			right: 0px;
			z-index: 100;
			display: inline-block;
			color: #f24439;
			font-size: 34rpx;
			.bg-img {
				width: 80rpx;
				height: 40rpx;
				img {
					opacity: 1;
				}
			}
		}
	}
	.login-btn-control {
		width: 680rpx;
		margin-top: 20px;
		.l-btn-c {
			background: $wlh-color-defealt;
		}
		.l-btn-c-ts {
			background-color: transparent;
		}
	}
	.login-btn-a-control {
		width: 680rpx;
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
		.a-btn {
			color: #fff;
		}
	}
}
</style>
